<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <title>Title</title>
    <!-- bootstrap文件 -->
    <link rel="stylesheet" href="../../static/bootstrap/css/bootstrap.css">
    <script src="../../static/bootstrap/jquery-3.5.1.min.js"></script>
    <script src="../../static/bootstrap/js/bootstrap.bundle.js"></script>
    <script src="../../static/bootstrap/js/bootstrap.min.js"></script>

    <!--自定义css文件-->
    <link rel="stylesheet" href="../../static/css/style2.css">
    <!-- <link href="https://s1.wenjuan.com/static/build/css/form_main.css?v=353eb70501d8aa769c028d932bf6f9f3"
    rel="stylesheet"> -->

     <!-- vue文件 -->
    <script src="../../static/js/vue.js"></script>

    <!--字体图标文件-->
    <link rel="stylesheet" href="../../static/font-awesome-4.7.0/css/font-awesome.css">

<body class="border-0">

    <div class="border-0">
        <!--侧边栏-->
        <div class="sidebar min-vh-100 text-white " style="margin-left: 200px;">
            <div class="m-4">
                <img src="../../static/images/1.jpg" alt="" style="border-radius: 50%; width:150px ; height: 150px;">
            </div>
            <hr>
            <ul class="list-group">
                <li class="list-group-item"><a href="../../pages/user/Rental_center.jsp" style="color:white">返回功能界面</a></li>
                <li class="list-group-item"><a href="../../pages/user/userLogin.jsp" style="color:white">退出登录</a></li>
            </ul>
        </div>

        <!-- 主体 -->
        <div class="main border-0 bg-light" style=" margin-left: 200px;">
            <!--导航栏-->
            <div class="head fixed-top bg-secondary">
                <div class="mx-5 row py-3 ">
                    <div class="col-4">
                        <a class="show" href="javascript:void(0);"><i class="fa fa-bars fa-2x"></i></a>
                    </div>
                    <div class="col-4 text-center d-none d-sm-block">
                        <a href="javascript:void(0);"><i class="fa fa-television fa-2x"></i></a>
                    </div>
                    <div class="col-4 text-center d-block d-sm-none">
                        <a href="javascript:void(0);"><i class="fa fa-mobile fa-2x"></i></a>
                    </div>
                    <div class="col-4 text-right">
                        <a href="javascript:void(0);" class="show1"><i class="fa fa-user-o fa-2x"></i></a>
                    </div>
                </div>
            </div>
            <!-- 个人信息表 -->
            <div class="row" style="margin-top: 65px;">
                <div class="col-2 rounded-pill">
                   <img src="../../static/images/1.jpg" alt="" style="border-radius: 50%;">
                </div>
                <div class="ml-4">
                    <table class="table table-sm border-0 table-borderless mb-0" id="table1">
                        <tbody>
                            <tr>
                                <td>员工号:</td>
                                <td>{{userId}}</td>
                            </tr>
                            <tr>
                                <td>姓名:</td>
                                <td>{{username}}</td>
                            </tr>
                            <tr>
                                <td>性别:</td>
                                <td>{{sex}}</td>
                            </tr>
                            <tr>
                                <td>生日:</td>
                                <td>{{birthday}}</td>
                            </tr>
                            <tr>
                                <td>电话:</td>
                                <td>{{phoneNumber}}</td>
                            </tr>
                            <tr>
                                <td>地址:</td>
                                <td>{{address}}</td>
                            </tr>
                        </tbody>
                    </table>
                    <button class="btn btn-light mt-1 text-primary" style="margin-left: 150px;" data-toggle="modal"
                        data-target="#Modal">修改信息</button>
                </div>
            </div>

         <%--   <!-- 轨迹及其他 -->
            <div class="bg-white m-2">
                <h4 class="ml-1">我的轨迹</h4>
                <table class="table table-hover table-bordered">
                    <tbody>
                        <tr>
                            <td>技术成果: <span style="color:red;">0</span>项</td>
                            <td>需交水费: <span style="color:red;">0</span>元</td>
                            <td>需交水费: <span style="color:red;">0</span>元</td>
                            <td>参与活动: <span style="color:red;">0</span>项</td>
                        </tr>
                        <tr>
                            <td>科技服务: <span style="color:red;">0</span>项</td>
                            <td>完成项目: <span style="color:red;">0</span>项</td>
                            <td>发布留言: <span style="color:red;">0</span>条</td>
                            <td>工作年龄: <span style="color:red;">0</span>年</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>--%>
            <hr>
            <hr>
            <hr>
            <hr>
            <hr>

            <!--尾部-->
            <div class="bg-dark py-5 ">

                <hr class="border-white my-0 mx-5" style="border:1px dotted red" />
                <ul class="nav justify-content-center pt-0">
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">企业文化</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">企业特色</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">企业项目</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">联系我们</a>
                    </li>
                </ul>
                <hr class="border-white my-0 mx-5" style="border:1px dotted red" />
                <div class="text-center text-white mt-2">Copyright 2020-12-22 </div>
            </div>
        </div>

        <!--登录表-->
        <!-- <div class="vh-100 vw-100 reg">
            <div class="container mt-5">
                <div class="text-right">
                    <a class="del1" href="javascript:void(0);"><i class="fa fa-times fa-2x"></i></a>
                </div>
                <h2 class="text-center mb-5">圣耀地产</h2>
                <form>
                    <div class="input__block form-group">
                        <input type="text" id="name" name="name" required class="input text-center form-control" />
                        <label for="name" class="label">姓名</label>
                    </div>
                    <div class="input__block form-group">
                        <input type="email" id="email" name="email" required class="input text-center form-control" />
                        <label for="email" class="label">邮箱</label>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                        <label class="form-check-label" for="exampleCheck1">记住我？</label>
                    </div>
                </form>
                <button type="button" class="btn btn-primary btn-block my-2">登录</button>
                <h6 class="text-center"><a href="">忘记密码</a><span class="mx-4">|</span><a href="">立即注册</a></h6>
            </div>
        </div> -->

    </div>

    <div class="modal fade" id="Modal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalTitle">修改个人信息</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="FormSubmit" action="/updateUserInfo" method="POST">
                        <input type="hidden" name="userId" value="${sessionScope.user.userId}">
                        <div class="form-group col-11">
                            <label for="username">姓名</label>
                            <input type="text" class="form-control" id="username" name="username"
                                :placeholder="old_value" autocomplete="off">
                        </div>
                        <div class="form-group col-11">
                            <label for="sex">性别</label>
                            <input type="text" class="form-control" id="sex" name="sex" :placeholder="old_value"
                                autocomplete="off">
                        </div>
                        <div class="form-group col-11">
                            <label for="birthday">生日</label>
                            <input type="date" class="form-control" id="birthday" name="birthday" :placeholder="old_value"
                                autocomplete="off">
                        </div>
                        <div class="form-group col-11">
                            <label for="phoneNumber">电话</label>
                            <input type="text" class="form-control" id="phoneNumber" name="phoneNumber"
                                :placeholder="old_value" autocomplete="off">
                        </div>
                        <div class="form-group col-11">
                            <label for="address">地址</label>
                            <input type="text" class="form-control" id="address" name="address" :placeholder="old_value"
                                autocomplete="off">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-success" onclick="tijiao();">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#table1',
            data: {
                userId: '${sessionScope.user.userId}',
                username: '${sessionScope.user.username}',
                sex: '${sessionScope.user.sex}',
                birthday: '${sessionScope.user.birthday}',
                phoneNumber: '${sessionScope.user.phoneNumber}',
                address: '${sessionScope.user.address}'
            }
        })
        new Vue({
            el: '#username',
            data: {
                old_value: '${sessionScope.user.username}'
            }
        })
        new Vue({
            el: '#sex',
            data: {
                old_value: '${sessionScope.user.sex}'
            }
        })
        new Vue({
            el: '#birthday',
            data: {
                old_value: '${sessionScope.user.birthday}'
            }
        })
        new Vue({
            el: '#phoneNumber',
            data: {
                old_value: '${sessionScope.user.phoneNumber}'
            }
        })
        new Vue({
            el: '#address',
            data: {
                old_value: '${sessionScope.user.address}'
            }
        })
    </script>
</body>

<script>
    $(function () {
        $(".close").click(function () {
            $(this).alert("close");
        })
        $(".alert").on("close.bs.alert", function (e) {
            $("#Modal-test").modal();
        })
    })
    function tijiao(){
        document.getElementById("FormSubmit").submit();
        $("#loginForm").submit();
    }
</script>

</html>